<template>
  <div>
    <div class="box" @click="showFull">
      <ul class="list">
        <li>
          <img v-if="isShowminplayer" :src="this.$store.state.player.list[this.$store.state.player.index].al.picUrl" alt="">
        </li>
        <li>
          <p class="name">{{this.$store.state.player.list[this.$store.state.player.index].name}}</p>
          <p class="lyc">{{this.$store.state.playingLyric}}</p>
        </li>
        <li>
          <i class="iconfont"></i>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import bus from '@/bus.js'
import { mapState } from 'vuex'
export default {
  name: 'minplay',
  data () {
    return {
      img: '',
      name: '',
      lyc: ''
    }
  },
  methods: {
    showFull () {
      this.$store.commit('showFull')
      bus.$emit('show')
    }
  },
  mounted () {
    bus.$on('miniData', (obj) => {
      this.img = obj.img
      this.name = obj.name
      this.lyc = obj.lyc
    })
  },
  computed: {
    ...mapState({
      isShowminplayer: 'isShowminplayer'
    })
  }
}
</script>
<style lang="stylus" scoped>
.box
  position fixed
  z-index 99
  // background red
  bottom 0
  left 0
  height 1rem
  right 0
  background white
  .list
    display flex
    justify-content space-between
    li
      &:first-child
        width 1rem
        border-radius 50%
        overflow hidden
      &:last-child
        width 1rem
      margin-left .2rem
      img
        width 1rem
        height 1rem
        border-radius 50%
</style>
